<div class="speed_settings">
  <section>
    <h3> Global Rate Limits </h3>

    <div class="indented_field">
      <div class="field">
        <p>Upload limit:</p>
        <mat-form-field class="medium numeric_field">
          <input matInput type="number" [(ngModel)]="speed_settings.up_limit" value="{{speed_settings.up_limit}}" [formControl]="validators.up_limit">
        </mat-form-field>
        <p>KiB/s <i>(0 or -1 implies &infin;)</i></p>
      </div>
      <mat-error *ngIf="validators.up_limit.invalid">{{invalidLimitMessage()}}</mat-error>

      <div class="field">
        <p>Download limit:</p>
        <mat-form-field class="medium numeric_field">
          <input matInput type="number" [(ngModel)]="speed_settings.dl_limit" value="{{speed_settings.dl_limit}}" [formControl]="validators.dl_limit">
        </mat-form-field>
        <p>KiB/s <i>(0 or -1 implies &infin;)</i></p>
      </div>
      <mat-error *ngIf="validators.dl_limit.invalid">{{invalidLimitMessage()}}</mat-error>
    </div>
  </section>
  <br/>

  <section>
    <h3> Alternative Rate Limits </h3>

    <div class="indented_field">
      <div class="field">
        <p>Upload</p>
        <mat-form-field class="medium numeric_field">
          <input matInput type="number" [(ngModel)]="speed_settings.alt_up_limit" value="{{speed_settings.alt_up_limit}}" [formControl]="validators.alt_up_limit">
        </mat-form-field>
        <p>KiB/s <i>(0 or -1 implies &infin;)</i></p>
      </div>
      <mat-error *ngIf="validators.alt_up_limit.invalid">{{invalidLimitMessage()}}</mat-error>

      <div class="field">
        <p>Download:</p>
        <mat-form-field class="medium numeric_field">
          <input matInput type="number" [(ngModel)]="speed_settings.alt_dl_limit" value="{{speed_settings.alt_dl_limit}}" [formControl]="validators.alt_dl_limit">
        </mat-form-field>
        <p>KiB/s <i>(0 or -1 implies &infin;)</i></p>
      </div>
      <mat-error *ngIf="validators.alt_dl_limit.invalid">{{invalidLimitMessage()}}</mat-error>

      <div>
        <div class="field">
          <mat-checkbox [(ngModel)]="speed_settings.scheduler_enabled">Schedule use of alternative rate limits</mat-checkbox>
        </div>

        <div class="indented_field {{speed_settings.scheduler_enabled ? '' : 'disabled'}}">

          <div class="field" style="justify-content: flex-start;">
            <div>
              From:
              <mat-form-field class="x-small numeric_field">
                <input matInput type="number" [(ngModel)]="speed_settings.schedule_from_hour" value="{{speed_settings.schedule_from_hour}}">
              </mat-form-field>
              :
              <mat-form-field class="x-small numeric_field">
                <input matInput type="number" [(ngModel)]="speed_settings.schedule_from_min" value="{{speed_settings.schedule_from_min}}">
              </mat-form-field>
            </div>

            &nbsp;
            &nbsp;

            <div>
              To:
              <mat-form-field class="x-small numeric_field">
                <input matInput type="number" [(ngModel)]="speed_settings.schedule_to_hour" value="{{speed_settings.schedule_to_hour}}">
              </mat-form-field>
              :
              <mat-form-field class="x-small numeric_field">
                <input matInput type="number" [(ngModel)]="speed_settings.schedule_to_min" value="{{speed_settings.schedule_to_min}}">
              </mat-form-field>
            </div>
          </div>

          <div class="field">
            <mat-form-field>
              <mat-label>Which days</mat-label>
              <mat-select disabled={{!speed_settings.scheduler_enabled}} [(value)]="scheduler_day_chosen">
                <mat-option *ngFor="let day of scheduler_days_ordering" [value]="day">
                  {{ day }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>
  </section>
  <br/>
</div>
